import "./index.scss";
import NavLeft from "../../../../components/navLeft";
import { useNavigate } from "react-router-dom";
import hintIcon from "../../../../images/base/hintIcon.png";
import yelloRightIcon from "../../../../images/base/yelloRightIcon.png";
import qieHuanIcon from "../../../../images/base/qieHuanIcon.png";
import usdtIcon from "../../../../images/base/usdtIcon.png";
import userLogo from "../../../../images/base/userLogo.png";
import { useState } from "react";
function Swap() {
  const navigate = useNavigate();
  const [checkIndex, setCheckIndex] = useState(3);
  const checkList = [
    {
      label: "25%",
      index: 0,
    },
    {
      label: "50%",
      index: 1,
    },
    {
      label: "70%",
      index: 2,
    },
    {
      label: "Max",
      index: 3,
    },
  ];
  const goPath = (path) => {
    navigate(path);
  }

  const setCheckIndexChange=(e=>{
    console.log("e===",e)
    setCheckIndex(e)
  })
  const paddingStyle = { paddingLeft: ".16rem", paddingRight: ".16rem" };
  return (
    <>
      <div className="page-box swap-page">
        <NavLeft centerName={"Swap"} paddingStyle={paddingStyle}></NavLeft>
        <div className="fixed-block"></div>
        <div className="hint-box">
          <img src={hintIcon} className="hint-icon"></img>
          <div className="hint-txt">兑换比例：1 USDT ≈ 102.56 CA</div>
        </div>
        <div className="info-top-box">
          <div className="top-box">
            <div className="left-option">
              <img className="bi-icon" src={userLogo}></img>
              <div className="bi-txt">VAULT</div>
            </div>
            <div className="right-option">
              <div className="bi-txt">余额：1800.00</div>
            </div>
          </div>

          <div className="number-one-option">1500.00</div>
          <div className="number-two-option">≈ 150.00 USDT</div>

          <div className="check-box-list">
            {checkList.map((item) => (
              <div
                key={item.index}
                className={`check-item ${
                  checkIndex === item.index ? "check-item-active" : ""
                }`}
                onClick={() => setCheckIndexChange(item.index)}
              >
                {item.label}
              </div>
            ))}
          </div>
        </div>

        <div className="info-center-box">
          <img src={qieHuanIcon} className="icon"></img>
        </div>

        <div className="info-bottom-box">
          <div className="top-box">
            <div className="left-option">
              <img className="bi-icon" src={usdtIcon}></img>
              <div className="bi-txt">USDT</div>
            </div>
            <div className="right-option">
              <div className="bi-txt">余额：1800.00</div>
            </div>
          </div>

          <div className="bottom-box">150.00</div>
        </div>

        <div className="hint-info-box">
          <div className="left-txt">兑换滑点：</div>
          <div className="right-txt">3%</div>
        </div>
        <div className="hint-info-box">
          <div className="left-txt">预计获得：</div>
          <div className="right-txt">1500.56 USDT</div>
        </div>
        <div className="hint-info-box">
          <div className="left-txt">兑换滑点：</div>
          <div className="right-txt">1500 GAS</div>
        </div>
        <div className="hint-none-icon-box">
          <div className="left-txt">GAS余额:100.00</div>
          <div className="right-txt">去获取</div>
        </div>
        <div className="btn-box">兑换</div>

        <div className="list-box">
          <div className="list-header-option">
            <div className="header-left">兑换记录</div>
            <div className="header-right" onClick={() => goPath('/SwapList')}>
              <div className="right-name">全部记录</div>
              <img className="right-icon" src={yelloRightIcon}></img>
            </div>
          </div>
          <div className="item-header-box">
            <div className="box-item">时间</div>
            <div className="box-item box-item-center">交易对</div>
            <div className="box-item box-item-right">状态</div>
          </div>
          <div className="box-info-item">
            <div className="box-item">04/25/2025 18:25:56</div>
            <div className="box-item box-item-center">
              用 1500 VAULT兑换 150.5
            </div>
            <div className="box-item box-item-right">已完成</div>
          </div>

          <div className="box-info-item">
            <div className="box-item">04/25/2025 18:25:56</div>
            <div className="box-item box-item-center">
              用 1500 VAULT兑换 150.5
            </div>
            <div className="box-item box-item-right">已完成</div>
          </div>

          <div className="box-info-item">
            <div className="box-item">04/25/2025 18:25:56</div>
            <div className="box-item box-item-center">
              用 1500 VAULT兑换 150.5
            </div>
            <div className="box-item box-item-right">已完成</div>
          </div>
        </div>
      </div>
    </>
  );
}
export default Swap;
